import 'package:flutter/material.dart';

class DragDemo extends StatefulWidget {
  const DragDemo({super.key});

  @override
  State<DragDemo> createState() => _DragDemoState();
}

class _DragDemoState extends State<DragDemo> {
  double _top = 100.0;
  double _left = 100.0;
  double _verticalTop = 100.0;
  double _horizontalLeft = 100.0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Text("Free Drag (Any Direction)"),
        SizedBox(
          height: 200,
          child: Stack(
            children: [
              Positioned(
                top: _top,
                left: _left,
                child: GestureDetector(
                  onPanUpdate: (details) {
                    setState(() {
                      _left += details.delta.dx;
                      _top += details.delta.dy;
                    });
                  },
                  child: const DraggableBox(color: Colors.red),
                ),
              ),
            ],
          ),
        ),
        
        const SizedBox(height: 20),
        const Text("Vertical Only Drag"),
        SizedBox(
          height: 200,
          child: Stack(
            children: [
              Positioned(
                top: _verticalTop,
                left: 50,
                child: GestureDetector(
                  onVerticalDragUpdate: (details) {
                    setState(() {
                      _verticalTop += details.delta.dy;
                    });
                  },
                  child: const DraggableBox(color: Colors.green),
                ),
              ),
            ],
          ),
        ),
        
        const SizedBox(height: 20),
        const Text("Horizontal Only Drag"),
        SizedBox(
          height: 200,
          child: Stack(
            children: [
              Positioned(
                top: 50,
                left: _horizontalLeft,
                child: GestureDetector(
                  onHorizontalDragUpdate: (details) {
                    setState(() {
                      _horizontalLeft += details.delta.dx;
                    });
                  },
                  child: const DraggableBox(color: Colors.blue),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

class DraggableBox extends StatelessWidget {
  final Color color;
  
  const DraggableBox({super.key, required this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 80,
      height: 80,
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(10),
      ),
      child: const Icon(Icons.drag_handle, color: Colors.white),
    );
  }
}